<template>
    <div class="page-container page-customerManage">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="margin-left: 10px;margin-bottom: 40px">
            <el-form-item label="活动内容:"></el-form-item>
            <el-row>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item label="活动名称">
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item :label="labelText">
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item label="价格">
                    </el-form-item>
                </el-col>
                <el-col :span="3" v-if="!showButton" style="margin-right: 22px;">
                    <el-form-item label="操作">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-for="item in activitys" :key="item" style="margin-bottom: 10px">
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item>
                        <el-input v-model="item.name" style="width: 150px;" placeholder="请输入活动名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item>
                        <el-input v-model="item.duration" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)[0]"
                            style="width: 150px;margin-right: 3px;" :placeholder="placeholder"></el-input>{{ unit }}
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-form-item>
                        <el-input v-model="item.price" type="number" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)[0]"
                            :min="0" :maxlength="4" style="width: 150px;margin-right: 3px;" placeholder="请输入价格"></el-input>元
                    </el-form-item>
                </el-col>
                <el-col :span="3" style="margin-right: 22px;">
                    <el-button icon="el-icon-delete" v-if="!showButton" @click="deleteActivity(item)"></el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-button icon="el-icon-circle-plus-outline" v-if="!showButton" style="margin-bottom: 10px"
                    @click="addData"></el-button>
            </el-row>
            <el-row>
                <el-form-item lable="活动日期">
                    <el-date-picker v-model="time" type="daterange" range-separator="至" value-format="yyyy-MM-dd"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="电话编辑:"></el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="咨询电话">
                    <el-input v-model="phoneNum" style="width: 290px;" placeholder="请输入咨询电话"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-button v-if="showButton" style="margin-bottom: 10px" class="search-btn"
                        @click="saveData">保存</el-button>
                    <el-button v-if="!showButton" style="margin-bottom: 10px" class="search-btn"
                        @click="publishData">发布</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import { addActivity, updateActivity } from '@/api/api.js';
import { getLocalStorage } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";

export default {
    data() {
        return {
            placeholder: '请输入使用总人数',
            labelText: "企业使用总人数",
            unit: '年',
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                duration: [
                    { type: 'number', required: true, message: '请输入使用总人数', trigger: 'change' }
                ],
                price: [
                    { type: 'number', required: true, message: '请输入价格', trigger: 'change' }
                ],
            },
            time: [],
            showButton: false,
            phoneNum: '17721872191',
            activityType: '',
            activitys: [
                {
                    tempId: 0,
                    name: '',
                    content: '',
                    duration: '',
                    phoneNum: '',
                    price: 0,
                    activityType: '',//活动类型 :1 名片时长/2 名片使用人数/3 短视频数量
                    startTime: '',
                    endTime: '',
                }
            ]
        }
    },
    created() {
        const order = sessionStorage.getItem("editOrderDetail");
        if (this.$route.query.activityType) {
            //发布
            this.activityType = parseInt(this.$route.query.activityType);
            this.activitys.forEach(item => {
                item.activityType = parseInt(this.activityType);
            })
            this.changeText(this.activityType);
        } else if (order) {
            this.showButton = true;
            const orderInfo = JSON.parse(order);
            this.activitys.pop();
            this.activitys.push(orderInfo);
            this.phoneNum = orderInfo.phoneNum;
            this.time = orderInfo.time.split(" - ");
            this.changeText(orderInfo.activityType);
        }
    },
    mounted() {
    },
    methods: {
        changeText(activityType) {
            //活动类型 :1 名片时长/2 名片使用人数/3 短视频数量
            switch (activityType) {
                case 1:
                    this.placeholder = '请输入名片时长';
                    this.labelText = "企业使用名片时长";
                    this.unit = "年";
                    break;
                case 2:
                    this.placeholder = '请输入使用总人数';
                    this.labelText = "企业使用总人数";
                    this.unit = "位";
                    break;
                case 3:
                    this.placeholder = '请输入短视频数量';
                    this.labelText = "企业使用短视频数量";
                    this.unit = "个";
                    break;
            }
        },
        //修改
        saveData() {
            if (serverUrl.baseURL.indexOf("/test/") != -1) {
                this.$message({
                    message: '演示环境不能保存,请谅解',
                    type: 'error'
                });
                return;
            }
            if (this.time && this.time.length == 0) {
                this.$message({
                    message: '请选择日期',
                    type: 'error'
                });
                return;
            }
            this.activitys.forEach(item => {
                item.startTime = this.time[0];
                item.endTime = this.time[1];
                item.phoneNum = this.phoneNum;
                item.status = item.status == "待上线" ? 0 : item.status == "进行中" ? 1 : item.status == "已结束" ? 2 : 0;
            })
            const user = getLocalStorage("user");
            if (user) {
                const userInfo = JSON.parse(user);
                console.log(userInfo)
                updateActivity(this.activitys[0]).then(res => {
                    if (res.code == 200) {
                        console.log(this.activitys)
                        this.$message({
                            message: '操作成功',
                            type: 'info'
                        });
                        this.$router.push({ path: "/activity" })
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }
                });
            } else {
                this.$message({
                    message: '请重新登录',
                    type: 'error'
                });
            }
        },
        addData() {
            if (this.activitys.length < 6) {
                console.log(this.activitys)
                for (var item in this.activitys) {
                    if (!this.activitys[item].duration) {
                        this.$message({
                            message: '时长必填',
                            type: 'error'
                        });
                        return;
                    }
                    if (!this.activitys[item].price) {
                        this.$message({
                            message: '价格必填',
                            type: 'error'
                        });
                        return;
                    }
                }
                const activity = {
                    tempId: new Date().getTime(),
                    name: '',
                    content: '',
                    duration: '',
                    phoneNum: this.phoneNum,
                    price: 0,
                    activityType: parseInt(this.activityType),//活动类型 :1 名片时长/2 名片使用人数/3 短视频数量
                    startTime: '',
                    endTime: '',
                };
                this.activitys.push(activity);
            } else {
                this.$message({
                    message: '最多一次添加6个活动',
                    type: 'error'
                });
            }
        },
        publishData() {
            if (serverUrl.baseURL.indexOf("/test/") != -1) {
                this.$message({
                    message: '演示环境不能保存,请谅解',
                    type: 'error'
                });
                return;
            }
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.time && this.time.length == 0) {
                        this.$message({
                            message: '请选择日期',
                            type: 'error'
                        });
                        return;
                    }
                    this.activitys.forEach(item => {
                        item.startTime = this.time[0];
                        item.endTime = this.time[1];
                        item.phoneNum = this.phoneNum;
                        //活动状态：0 待上线 1进行中 2已结束
                    })
                    const user = getLocalStorage("user");
                    if (user) {
                        let params = {
                            activitys: this.activitys
                        }
                        addActivity(params).then(res => {
                            if (res.code == 200) {
                                console.log(this.activitys)
                                this.$message({
                                    message: '操作成功',
                                    type: 'info'
                                });
                                this.$router.push({ path: "/activity" })
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        this.$message({
                            message: '请重新登录',
                            type: 'error'
                        });
                    }
                }
            });
        },
        deleteActivity(item) {
            const index = this.activitys.findIndex(ite => { ite.tempId == item.tempId });
            this.activitys.splice(index, 1);
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    margin: 0px;
    padding: 0px;
    height: 600px;
    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        padding: 8px 20px;
        font-size: 14px;
        border-radius: 4px;
    }
}
.search-btn {
    margin-top: 3px;
    border-radius: 4px;
    background: #51CDCB;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
}
.el-form-item {
    margin-bottom: 10px;
}
</style>
